<template>
	<div class="system-environment h100 p-15">
		<el-card shadow="never" class="border-none mb-4">
			<div>Redis信息</div>
			<div class="mb-15">
				<el-table :data="info.server">
					<el-table-column prop="desc" label="参数"></el-table-column>
					<el-table-column prop="value" label="值"></el-table-column>
				</el-table>
			</div>
		</el-card>
		<el-card shadow="never" class="border-none mb-4">
			<div>缓存数据管理</div>
			<div class="mb-15">
				<el-card class="!border-none mb-2" shadow="never">
					<el-alert type="warning" title="避免线上压力，正式环境关闭redis的全局查询" :closable="false" show-icon></el-alert>
				</el-card>
				<el-form :model="info.queryParams" class="ml-[10px]" ref="queryForm" :inline="true">
					<el-form-item label="key：">
						<el-input v-model="info.queryParams.key" placeholder="请输入key" class="w-[180px]" />
					</el-form-item>
					<el-form-item>
						<el-button-group>
							<el-button type="primary" icon="ele-Search" @click="getSystemInfo"> 查询 </el-button>
							<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
						</el-button-group>
					</el-form-item>
				</el-form>
				<el-table :data="info.keys">
					<el-table-column prop="key" label="缓存键名" />
					<el-table-column label="操作">
						<template #default="{ row }">
							<div class="flex">
								<el-button type="primary" v-auth="'setting/dbRedis/edit'" link @click="handleEdit(row)"> 编辑 </el-button>
								<el-button type="primary" v-auth="'setting/dbRedis/delete'" link @click="handleDelete(row['key'])"> 删除 </el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>
		<redisEdit v-if="showDialog" ref="deptDialogRef" @submit="getSystemInfo()" @close="showDialog = false" />
	</div>
</template>

<script lang="ts" setup name="dataRedis">
import { ref, reactive, nextTick, onMounted } from 'vue';
import { dbRedisInfo, dbRedisDelete } from '/@/api/setting/db';
import { messageBox } from '/@/utils/message';
import redisEdit from '/@/views/setting/data/component/redisEdit.vue';

const deptDialogRef = ref();

const showDialog = ref(false);

const info = reactive({
	server: [],
	keys: [],
	queryParams: {
		key: '',
	},
});

const getSystemInfo = async () => {
	let res = await dbRedisInfo({ key: info.queryParams.key });
	info.server = res.server;
	info.keys = res.keys;
};

const handleEdit = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		deptDialogRef.value?.setFormData(row, () => {
			deptDialogRef.value?.open('edit');
		});
	});
};

const handleDelete = async (key: string) => {
	messageBox(`确定要删除缓存` + key + `吗？`).then(async () => {
		await dbRedisDelete({ key: key });
		getSystemInfo();
	});
};

const resetQuery = () => {
	info.queryParams.key = '';
	getSystemInfo();
};

onMounted(() => {
	getSystemInfo();
});
</script>

<style lang="scss" scoped></style>
